<template>
	<u-popup :show="visible" mode="bottom" round="16rpx" closeOnClickOverlay closeable @close='hide'>
		<view class="member-popup">
			<view class="member-popup-loading" v-if="loading">
				<u-loading-icon mode="circle" size="48rpx" color="#c9c9c9"></u-loading-icon>
			</view>
			<!-- 显示人员名片 -->
			<defaultCard :userInfo="detail"></defaultCard>

			<view class="member-popup-btns" v-if="showDelete||showEdit">
				<view v-if="showDelete" class="member-popup-btn opactive-hover" style="--color:#F53F3F;--bgColor:#FFECE8"
					@tap="deleteHandle">
					<view style="margin-right: 10rpx;" v-if="loading_delete">
						<u-loading-icon mode="spinner" size="30rpx" color="#c9c9c9"></u-loading-icon>
					</view>
					<text style="margin-left: 10rpx;">删除</text>
				</view>
				<view v-if="showEdit" class="member-popup-btn opactive-hover" style="--color:#FFFFFF;--bgColor:#276AEE"
					@tap="editHandle">
					<view style="margin-right: 10rpx;" v-if="loading_edit">
						<u-loading-icon mode="spinner" size="30rpx" color="#c9c9c9"></u-loading-icon>
					</view>
					<text style="margin-left: 10rpx;">编辑</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import defaultCard from '@/components/cardStyle/defaultCard.vue'
	export default {
		components: { defaultCard },
		props: {
			// 显示删除按钮
			showDelete: {
				type: Boolean,
				default: false
			},
			// 显示编辑按钮
			showEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				visible: false,
				loading: false,
				detail: {},

				loading_delete: false,
				loading_edit: false,
			}
		},
		methods: {
			show(record, loading = true) {
				this.visible = true
				this.loading = loading
				this.detail = record || {}
			},
			hide() {
				this.visible = false
			},
			deleteHandle() {
				console.log(this.detail);
				if (this.detail.roleIdentify === 1) {
					uni.showToast({ title: '超级管理员不能被删除', icon: 'none' })
					return
				}

				const that = this
				uni.showModal({
					title: '提示',
					content: `确定删除 ${this.detail.name} ?`,
					success: async (res) => {
						if (res.confirm) {
							this.loading_delete = true
							let res = await that.$api.delMemberCardByCompany(that.detail.id)
							this.loading_delete = false
							if (res.success) {
								uni.showToast({ title: '删除成功', icon: 'none' });
								that.$emit('delete', that.detail._index)
								that.hide()
							} else {
								uni.showToast({ title: res.message || '删除失败，请重试！', icon: 'none' });
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			editHandle() {
				const { id, openId } = this.detail
				uni.navigateTo({
					url: `/pagesParty/companyMemberDetail/companyMemberDetail?cardId=${id||''}&openId=${openId||''}`
				})
				this.hide()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.member-popup {
		position: relative;
		padding: 80rpx 32rpx 40rpx;
		z-index: 1;

		.member-popup-loading {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			display: flex;
			justify-content: center;
			align-items: center;
		}

		.member-popup-btns {
			padding: 24rpx 0 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.member-popup-btn {
				width: 302rpx;
				height: 64rpx;
				font-size: 28rpx;
				color: var(--color);
				line-height: 40rpx;
				background-color: var(--bgColor);
				border-radius: 4rpx;

				display: flex;
				justify-content: center;
				align-items: center;
			}

			.member-popup-btn+.member-popup-btn {
				margin-left: 80rpx;
			}
		}
	}
</style>